import React, {Component} from 'react'

import PropTypes from 'prop-types'

const {Provider, Consumer} = React.createContext('default')

export default class Parent extends Component {
    state = {
        childContext: '123',
        newContext: '456'
    }

    getChildContext() {
        return {value: this.state.childContext}
    }

    render() {
        return <div>
            <div>
                <label htmlFor="">childText:</label>
                <input type="text"
                       value={this.state.childContext}
                       onChange={e => this.setState({childContext: e.target.value})}/>
            </div>
            <div>
                <label htmlFor="">newContext:</label>
                <input type="text"
                       value={this.state.newContext}
                       onChange={e => this.setState({newContext: e.target.value})}/>
            </div>
            <Child2/>
            <Provider value={this.state.newContext}><Child1/></Provider>
        </div>
    }
}
const Child1 = () => {
    return <Consumer>
        {value=>{return <div>new Context:{value}</div>}}
    </Consumer>
}

class Child2 extends Component {
    render() {
        return <div>
            child2: {this.context.value}
        </div>
    }
}

Child2.contextTypes = {
    value: PropTypes.string,
}
Parent.childContextTypes = {
    value: PropTypes.string,
}
